<template>
    <div class="store">
        <empty v-if="content.length == 0" @refeshPage = 'getList'></empty>
        <div class="store-container" v-else>
            <div class="store-detail" v-for="(item,index) in content" :key="index">
                <div class="delete-btn" @click='deleteProduct(item.id)'>
                    <img src="~assets/icons/delete.png" alt="">
                </div>
                <div class="check-box">
                    <mt-checklist
                    v-model="checkValue"
                    :value="item.id"
                    :options="[item.id]" @change='checkedProduct(item.id,$event)'>
                    </mt-checklist>
                </div>
                <div class="product-message">
                    <img :src="item['image_url']" alt="">
                    <div class="message-des">
                        <p>{{item.name}}</p>
                        <p>{{item.content}}</p>
                        <!-- <p>规格: {{item.label}}</p> -->
                        <div class="btns-group">
                            <div class="btns">
                                <div class="btn" @touchend='deleteItem(item.id)'>-</div>
                                <p>{{item.number}}</p>
                                <div class="btn" @touchend='plus(item.id)'>+</div>
                            </div>
                            <div class="stock">
                                <span>库存 {{item.stock}}</span>
                            </div>
                            <div class="price">
                                <span>积分 {{item.price}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="total-price">
                <div class="choose-all">
                    <mt-checklist
                    v-model="checkAll"
                    value="all"
                    :options="['all']" @change='checkedAll($event)'>
                    </mt-checklist>
                    <span>全选</span>
                </div>
                <div class="account">
                    <span class="price-detail">积分{{accountAll}}</span>
                    <div class="account-btn" @click="toCreateOrder">
                        <span>结算</span>
                        <span v-show="accountNum > 0">({{accountNum}})</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Toast, MessageBox } from 'mint-ui';
import empty from './empty';

export default {
    name:'store',
    data(){
        return {
            checkValue: [],
            checkAll: [],
            accountAll: 0,
            accountNum: 0,
            content:[]
        }
    },
    methods:{
        checkedProduct(id,ev){
            this.accountNum = ev.length;
            this.accountAll = 0;
            if(ev.length == this.content.length){
                this.checkAll.push('all');
            }else{
                this.checkAll = [];
            }
            this.content.forEach((item,index) => {
                ev.forEach((subItem,i) => {
                    if(item.id == subItem){
                        this.accountAll += item.price*item.number; 
                    }
                })
            })
        },
        deleteItem(id){
            let temItem = this.content.find(item => item.id == id);
            if(temItem.number == 1){
                Toast({
                    message: '该宝贝不能再减少了~',
                    position: 'middle',
                    duration: 1500
                });
            }else{
                temItem.number -= 1;
            }
        },
        plus(id){
            let temItem = this.content.find(item => item.id == id);
            if(temItem.number >= temItem.stock){
                this.toast('就这么多库存啦！');
                return;
            }
            temItem.number += 1;
        },
        deleteProduct(id){
            let that = this;
            let token = localStorage.getItem('token');
            MessageBox.confirm('确定删除该宝贝吗?').then(action => {
                if(action == 'confirm'){
                    let loader = that.loading();
                    that.$ajax(that, 'get', that.$api.shoppingDel+id, null, token, function(res){
                        if(res.data['error_code'] == 0){
                            that.toast('删除成功！');
                            that.getStoreList();
                        }else{
                            that.toast(res.data['msg']);
                        }
                        loader.close();
                    })
                }
            });
        },
        checkedAll(ev){
            console.log(ev);
            console.log(this.checkAll);
            if(ev.length == 0){
                this.checkValue = [];
                this.accountAll = 0;
                this.accountNum = 0;
            }else{
                this.checkValue = [];
                this.accountAll = 0;
                this.accountNum = 0;
                let that = this;
                this.content.forEach(item => {
                    this.checkValue.push(item.id);
                    this.accountAll += item.price*item.number;
                })
                this.accountNum = this.content.length;
            }
        },
        getStoreList(){
            let that = this;
            let token = localStorage.getItem('token');
            let loader = that.loading();
            that.$ajax(that, 'get', that.$api.shoppingList+1, null, token, function(res){
                console.log(res);
                if(res.data['error_code'] == 0){
                    that.content = res.data['msg'];
                    that.transferUrl(that.content);
                }else{
                    that.toast(res.data['msg']);
                }
                loader.close();
            })
        },
        toCreateOrder(){
            if(this.accountNum == 0){
                this.toast('请选择兑换商品！');
                return;
            }
            let that = this;
            let token = localStorage.getItem('token');
            let content = that.content;
            let temArr = [];
            let sendObj = {};
            content.forEach((item,index) => {
                that.checkValue.forEach(subitem => {
                    let temObj = {};
                    if(item.id == subitem){
                        temObj['goods_id'] = item['goods_id'];
                        temObj['norms_id'] = item['norms_id'];
                        temObj['number'] = item['number'];
                        temArr.push(temObj);
                    }
                })
            })
            sendObj.goods = temArr;
            sendObj['total_number'] = that.accountNum;
            console.log(sendObj);
            let loader = that.loading('请稍等...');
            that.$ajax(that, 'post', that.$api.createOrderCredits, sendObj, token, function(res){
                if(res.data['error_code'] == 0){
                    console.log(res);
                    sessionStorage.setItem('order', res.data.msg);
                    that.$router.push('/create_order_credits');
                }else{
                    that.toast(res.data.msg);
                }
                loader.close();
            })
        },
        getList(){
            this.getStoreList();
        }
    },
    mounted(){
        this.getStoreList();
    },
    activated(){
        this.getStoreList();
    },
    components:{
        Toast,
        MessageBox,
        empty
    }
}
</script>

<style lang='less'>
@rem:100rem;

.store{
    width: 100%;
    margin-bottom: 196/@rem;
    .store-container{
        width: 100%;
        .mint-checkbox-label{
            display: none;
        }
        .mint-cell{
            background: none;
        }
        .mint-cell-wrapper{
            background: none;
        }
        .mint-cell-wrapper{
            padding: 0;
        }
        .mint-checklist-title{
            margin: 0;
            display: none;
        }
        .store-detail:nth-of-type(1){
            border-top: 2/@rem solid #f2f2f2;
        }
        .store-detail{
            width: 100%;
            height: 234/@rem;
            display: flex;
            border-bottom: 2/@rem solid #f2f2f2;
            position: relative;
            background: #fff;
            .delete-btn{
                position: absolute;
                height: 74/@rem;
                width: 74/@rem;
                right: 0;
                top: 12/@rem;
                display: flex;
                align-items: center;
                justify-content: center;
                img{
                    width: 34/@rem;
                    height: 36/@rem;
                }
            }
            .check-box{
                display: flex;
                align-items: center;
            }
            .product-message{
                display: flex;
                align-items: center;
                img{
                    width: 150/@rem;
                    height: 150/@rem;
                }
                .message-des{
                    width: 440/@rem;
                    display: flex;
                    margin-left: 30/@rem;
                    flex-direction: column;
                    align-items: flex-start;
                    p{
                        text-align: start;
                    }
                    p:nth-of-type(1){
                       font-size: 26/@rem;
                       color: #333;
                       width: 100%;
                       overflow: hidden;
                       white-space: nowrap;
                       text-overflow: ellipsis; 
                    }
                    p:nth-of-type(2){
                        font-size: 24/@rem;
                        color: #5b5b5b;
                        width: 100%;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        margin-top: 10/@rem;
                    }
                    p:nth-of-type(3){
                        font-size: 20/@rem;
                        color: #5b5b5b;
                        margin-top: 10/@rem;
                    }
                    .btns-group{
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        margin-top: 10/@rem;
                        .btns{
                            width: 220/@rem;
                            height: 50/@rem;
                            display: flex;
                            border-radius: 4/@rem;
                            border: 2/@rem solid #999999;
                            .btn{
                                width: 33.3%;
                                height: 100%;
                                font-size: 40/@rem;
                                color: #5b5b5b;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                            }
                            .btn:active{
                                background: #f2f1f1;
                            }
                            .btn:nth-of-type(1){
                                border-radius: 4/@rem 0 0 4/@rem;
                            }
                            .btn:nth-of-type(2){
                                border-radius: 0 4/@rem 4/@rem 0;
                            }
                            p{
                                width: 33.3%;
                                height: 100%;
                                border-left: 1px solid #999999;
                                border-right: 1px solid #999999;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                color: #5b5b5b;
                            }
                        }
                        .price{
                            font-size: 26/@rem;
                            color: #fd4141;
                            margin-right: 20/@rem;
                        }
                    }
                }
            }
        }
        .total-price{
            width: 100%;
            height: 100/@rem;
            background: #fff;
            display: flex;
            justify-content: space-between;
            position: fixed;
            left: 0;
            bottom: 96/@rem;
            z-index: 99;
            transform: translateZ(0);
            .choose-all{
                height: 100%;
                display: flex;
                align-items: center;
            }
            .account{
                height: 100%;
                display: flex;
                align-items: center;
                .price-detail{
                    font-size: 30/@rem;
                    color: #fd4141;
                    margin-right: 40/@rem;
                }
                .account-btn{
                    width: 244/@rem;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: #fd4141;
                    color: #fff;
                    font-size: 30/@rem;
                }
                .account-btn:active{
                    background: #f33d3d;
                }
            }
        }
    }
}

</style>
